<template>
  <div class="resetPassword" ref="resetPassword">
    <div class="box">
      <div class="logoBox">
        <img src="../../images/logo.png"  class="logo" alt="logo"/>
      </div>
        <div class="resetPasswordBox">
          <input type="password" placeholder="新密码" id="password" v-model="passWord" @blur="pwRight">
        </div>
        <!--<a href="#login" class="cancelLink">取消</a>-->
        <router-link to="/login" class="cancelLink">取消</router-link>
        <button class="btn" @click="resetPw02">重置密码</button>

    </div>

    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
  </div>
</template>

<script>
  import alertTip from '../../components/common/alertTip'
  import CryptoJS from 'crypto-js'
export default {
  data () {
    return {
      passWord: null, //密码
      md5PassWord: null, //md5加密后的密码
      showAlert: false, //显示提示组件
      alertText: null, //提示的内容
    }
  },
  components: {
    alertTip,
  },
  methods: {
    pwRight(){
      if (this.passWord == null){
        this.showAlert = true;
        this.alertText = '密码不能为空！';
        return
      }
      if (this.passWord.length < 8 || this.passWord.length > 16){
        this.showAlert = true;
        this.alertText = '密码长度在8～16位之间！';
        return
      }

    },

    /**
     * 重置密码第二步
     * @returns {Promise.<void>}
     */
    async resetPw02(){
      if (this.passWord == null){
        this.showAlert = true;
        this.alertText = '密码不能为空！';
        return
      }

      if (this.passWord.length < 8 || this.passWord.length > 16){
        this.showAlert = true;
        this.alertText = '密码长度在8～16位之间！';
        return
      }

      this.md5PassWord = CryptoJS.MD5(this.passWord).toString();

      let res = null;
      let param = {
        email: this.$store.state.resetPwInfo.email,
        password: this.md5PassWord,
        code: this.$store.state.resetPwInfo.code
      }
      await this.axios.put('/reset_password02', param)
        .then(response => {
          res = response.data;
        })

      if (res.success){
        this.$router.push('login');
      }else {
        this.showAlert = true;
        this.alertText = res.errors.messageCn;
      }

    },
    closeTip(){
      this.showAlert = false;
    }
  },
  mounted (){
    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

    if(w < h){
      this.$refs.resetPassword.style.height = h +'px';
    }else {
      this.$refs.resetPassword.style.height = w +'px';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import '../../style/mixin';
  .resetPassword{
    background-color: #33CCFF;

    p, span, input{
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }

    .box{
      margin: 0 auto;
      position:absolute;
      top:0;
      left:0;
      width: 16rem;
      height: 16rem;
    }
    /*logo样式区  开始*/
    .logoBox{
      margin: 0 auto;
      width: 7rem;
      height: 3.5rem;
    }

    .logo{
      width: 5.6rem;
      height: 3.5rem;
      margin-top: 1rem;
      margin-left: 0.5rem;
      display: block;
    }
    /*logo样式区  结束*/

    /* 帐号密码输入区样式  开始*/
    .resetPasswordBox{
      margin: 0 auto;
      width: 9rem;
      height: 1.5rem;
      border: solid 0.05rem #ffffff;
      @include borderRadius(0.4rem);
      margin-top: 2rem;

      input{
        width: 100%;
        height: 100%;
        display: block;
        background-color: transparent;
        margin: 0;
        padding: 0;
        border: hidden;
        font-size: 0.5rem;
        text-indent: 0.4rem;
      }
      ::-webkit-input-placeholder{
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      :-ms-input-placeholder { /* Internet Explorer 10+ */
        color: #FFFFFF;
        text-indent: 0.4rem;
      }
      /* 帐号密码输入区样式  结束*/
    }

    /*忘记密码链接样式  开始*/
    a{
      font-size: 0.5rem;
      color: #FFFFFF;
      text-decoration: underline;
    }
    .cancelLink{
      display: block;
      text-align: center;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
    }
    /*忘记密码链接样式  结束*/

    /*按钮样式  开始*/
    .btn{
      margin: 0 auto;
      display: block;
      background-color: #FFFFFF;
      width: 9rem;
      height: 1.4rem;
      color: #33CCFF;
      font-size: 0.5rem;
      font-weight: bold;
      @include borderRadius(0.7rem);
      margin-top: 1rem;
      margin-bottom: 1rem;
    }
    /*按钮样式  结束*/



  }
</style>
